<template>
    <view class="confirm-layer" v-if="show" @click="change(false)">
        <view class="confirm-box flex-center-col">
            <view class="title flex-center" v-if="title">{{ title }}</view>
            <view class="content flex-center">
                <slot name="content"></slot>
            </view>
            <view class="btn-group flex-center">
                <view class="cancel flex-center" v-if="cancelBtn" @click="toCancal"> 取消
                </view>
                <view class="confirm flex-center" v-if="confirmBtn"
                    :style="{ marginLeft: `${cancelBtn ? '25px' : '0'}` }" @click="toConfirm">
                    {{ confirmBtn }}
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
        };
    },
    props: {
        show: {
            type: Boolean,
            default: false,
            required: true,
        },
        title: { type: String },
        confirmBtn: { type: String },
        cancelBtn: { type: String },

    },
    emits: ['confirm', 'cancel', 'change'],
    methods: {
        change(val) {
            this.$emit('change', val);
        },
        toConfirm() {
            this.$emit('confirm');
        },
        toCancal() {
            this.$emit('cancel');
        }
    }
};
</script>

<style lang="scss" scoped>
.confirm-layer {
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.8);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
}

.confirm-box {
    width: calc(100% - 50px);
    height: auto;
    background: #FFFFFF;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #CECECE;
    padding-bottom: 25px;

    .title {
        width: 100%;
        height: 42px;
        border-bottom: 1px solid #CECECE;
    }

    .content {
        width: 100%;
        height: auto;
        margin: 33px auto;
        font-size: 14px;
    }

    .btn-group {
        width: calc(100% - 50px);

        .confirm {
            flex: 1;
            height: 42px;
            background: #1F1F1F;
            border: 1px solid #1F1F1F;
            font-size: 14px;
            letter-spacing: 1px;
            color: #FFFFFF;
        }

        .cancel {
            flex: 1;
            height: 42px;
            border: 1px solid #1F1F1F;
            font-size: 14px;
            letter-spacing: 1px;
            color: #1F1F1F;
        }
    }
}
</style>